<template>
	<view style="padding: 0 30rpx;margin-top: -350rpx;">
		<scroll-view scroll-x enable-flex class="scroll-view_H">
			<view class="swiper-item-vip">
				<view @tap.stop="toPage('/pages/user/vip?type=vip')"
					style="height: 100%;background: url(../../static/vip/vip.png) left top / 100% 100% no-repeat;padding-left: 44rpx;padding-top: 50rpx;">
					<view class="flex">
						<view>
							<view class="bold fs-38" style="line-height: 44rpx;color: #0177FB;">
								月费VIP
							</view>
							<view class="fs-26 mt-20" v-if="!user_info.vipEndTime" style="color:#0177FB;">扩充好友人数升级 VIP
							</view>
							<view class="fs-26 mt-20" v-else style="color:#0177FB;">
								{{user_info.vipEndTime >= vipNowTime ? get_end_time(user_info.vipEndTime):'未开通VIP'}}
							</view>
							<view v-if="!user_info.vipEndTime" style="margin-top: 20rpx;">
								<view class="buy-btn-svip"
									style="background: linear-gradient(45deg, #0177FB, #01E2FB);">开通会员</view>
							</view>
							<view v-if="user_info.vipEndTime" style="margin-top: 20rpx;">
								<view class="buy-btn-svip"
									style="background: linear-gradient(45deg, #0177FB, #01E2FB);">立即续费</view>
							</view>
						</view>
						<image src="../../static/my/vip-icon.png"
							style="width: 166rpx;height: 150rpx;margin-left: 130rpx;">
						</image>
					</view>
				</view>
			</view>
			<view class="swiper-item-vip">
				<view @tap.stop="toPage('/pages/user/vip?type=svip')"
					style="height: 100%;background: url(../../static/vip/svip.png) left top / 100% 100% no-repeat;padding-left: 44rpx;padding-top: 50rpx;">
					<view class="flex">
						<view>
							<view class="bold fs-38" style="line-height: 44rpx;color: #1A314B;">
								年费SVIP
							</view>
							<view class="fs-26 mt-20" v-if="!user_info.svipEndTime" style="color:#1A314B;">扩充好友人数升级 SVIP
							</view>
							<view class="fs-26 mt-20" v-else style="color:#0177FB;">
								{{user_info.svipEndTime >= vipNowTime ? get_end_time(user_info.svipEndTime):'未开通SVIP'}}
							</view>
							<view v-if="!user_info.svipEndTime" style="margin-top: 20rpx;">
								<view class="buy-btn-svip"
									style="background: linear-gradient(45deg, #BCC8EB, #39526D);">开通会员</view>
							</view>
							<view v-if="user_info.svipEndTime" style="margin-top: 20rpx;">
								<view class="buy-btn-svip"
									style="background: linear-gradient(45deg, #BCC8EB, #39526D);">立即续费</view>
							</view>
						</view>
						<image src="../../static/my/svip-icon.png"
							style="width: 166rpx;height: 150rpx;margin-left: 130rpx;">
						</image>
					</view>
				</view>
			</view>
			<view class="swiper-item-vip">
				<view @tap.stop="toPage('/pages/user/vip?type=partner')"
					style="height: 100%;background: url(../../static/vip/vip_partner.png) left top / 100% 100% no-repeat;padding-left: 44rpx;padding-top: 50rpx;">
					<view class="flex">
						<view>
							<view class="bold fs-38 partnerEndTime_txt"
								style="line-height: 44rpx;color: #8608E6;">
								超级合伙人
							</view>
							<view class="fs-26 mt-20" v-if="!user_info.partnerEndTime" style="color:#A34FFE;">加入我们成为合伙人
							</view>
							<view class="fs-26 mt-20" v-else style="color:#A34FFE;">
								{{user_info.partnerEndTime >= vipNowTime ? get_end_time(user_info.partnerEndTime):'未加入合伙人'}}
							</view>
							<view v-if="!user_info.partnerEndTime" style="margin-top: 20rpx;">
								<view class="buy-btn-svip"
									style="background: linear-gradient(45deg, #AC50FF, #012BFB);">开通会员</view>
							</view>
							<view v-if="user_info.partnerEndTime" style="margin-top: 20rpx;">
								<view class="buy-btn-svip"
									style="background: linear-gradient(45deg, #AC50FF, #012BFB);">已开通</view>
							</view>
						</view>
						<image src="../../static/my/pvip-icon.png"
							style="width: 166rpx;height: 150rpx;margin-left: 130rpx;">
						</image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "partnerpages",
		data() {
			return {
				vipNowTime: 1000,
			};
		},
		onShow() {
			this.vipNowTime = new Date().getTime();
		},
		methods: {
			get_end_time(times) {
				return `有效期至 : ${this.dateFormat('YY-mm-dd',new Date(times))}`;
			},
		}
	}
</script>

<style lang="scss">
	.buy-btn-svip {
		width: 172rpx;
		height: 68rpx;
		line-height: 68rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #fff;
	}

	.scroll-view_H {
		white-space: nowrap;
		flex-direction: row;
		width: 100%;
	}

	.swiper-item-vip {
		border-radius: 20px;
		flex-shrink: 0;
		width: 690rpx;
		height: 280rpx;
		display: inline-block;
	}

	.swiper-item-vip:not(:first-child) {
		margin-left: 30rpx;
	}
</style>